{% extends 'layout.html' %}

{% block title %}{{posts.title}}{% endblock %}

{% block content %}


<div class="hbox hbox-auto-xs hbox-auto-sm">
    <div class="col w-md bg-light dk b-r bg-auto">
        <div class="wrapper b-b bg">
            <button class="btn btn-sm btn-default pull-right visible-sm visible-xs"><i class="fa fa-bars"></i></button>
            <a class="btn btn-sm btn-danger w-xs font-bold" href="/publish">发布文章</a>
        </div>
        <div class="wrapper hidden-sm hidden-xs" id="email-menu">
            <!--<ul class="nav nav-pills nav-stacked nav-sm">-->
                <!--<li class="active">-->
                    <!--<a  href="/">-->
                        <!--全部-->
                    <!--</a>-->
                <!--</li>-->
                <!--{% for category in categories %}-->
                <!--{% if '未分类'!==category.name %}-->
                <!--<li>-->
                    <!--<a href="/take/?s={{category.name}}">-->
                        <!--{{category.name}}-->
                    <!--</a>-->
                <!--</li>-->
                <!--{%endif%}-->
                <!--{%endfor%}-->
            <!--</ul>-->
            <div class="wrapper">Theme</div>
            <ul class="nav nav-pills nav-stacked nav-sm">
                <li>
                    <a href="/?t=top" >
                        <i class="fa fa-fw fa-circle text-muted" style="color: #3a3f51;"></i>
                        置顶
                    </a>
                </li>
                <li>
                    <a href="/?t=good">
                        <i class="fa fa-fw fa-circle text-muted" style="color: rgb(39, 194, 76);"></i>
                        精华
                    </a>
                </li>
                <li>
                    <a href="/?t=share">
                        <i class="fa fa-fw fa-circle text-muted" style="color: #fad733;"></i>
                        分享
                    </a>
                </li>
                <li>
                    <a href="/?t=ask">
                        <i class="fa fa-fw fa-circle text-muted" style="color: #f05050;"></i>
                        问答
                    </a>
                </li>
                <li>
                    <a href="/?t=job">
                        <i class="fa fa-fw fa-circle text-muted" style="color: rgb(35, 183, 229);"></i>
                        招聘
                    </a>
                </li>
                <li>
                    <a href="/?t=doc">
                        <i class="fa fa-fw fa-circle text-muted" style="color: rgb(114, 102, 186);"></i>
                        文档
                    </a>
                </li>
            </ul>

        </div>
    </div>


    <!--index right-->
    <div class="col">
        <!-- uiView:  -->
        <div>
            <div>
                <!-- header -->
                <div class="wrapper bg-light lter b-b">
                    <a class="btn btn-sm btn-default w-xxs m-r-sm" href="javascript:history.go(-1);"><i class="fa fa-long-arrow-left"></i></a>

                    <!--<div class="btn-group m-r-sm">-->
                    <!--<button class="btn btn-sm btn-default w-xxs w-auto-xs" tooltip="Archive"><i class="fa fa-archive"></i></button>-->
                    <!--<button class="btn btn-sm btn-default w-xxs w-auto-xs" tooltip="Report"><i class="fa fa-exclamation-circle"></i></button>-->
                    <!--<button class="btn btn-sm btn-default w-xxs w-auto-xs" tooltip="Delete"><i class="fa fa-trash-o"></i></button>-->
                    <!--</div>-->
                    <div class="btn-group">

                        <!--编辑-->
                        {% if posts.name == user.nickname || user.role > posts.role %}
                            <a href="/post/{{posts.id}}/edit" class="btn btn-sm btn-default w-xxs w-auto-xs"><i class="fa fa-edit"></i></a>
                        {% endif %}

                        <!--删除-->
                        {% if posts.name == user.nickname || user.role > posts.role %}
                            <button id="post-del" data-id="{{posts._id.toString()}}" class="btn btn-sm btn-default w-xxs w-auto-xs"><i class="fa fa-trash-o"></i></button>
                        {% endif %}
                        <!--tags-->
                        <div class="btn-group dropdown">
                            <button class="btn btn-sm btn-default w-xxs w-auto-xs dropdown-toggle"><i
                                    class="fa fa-fw fa-tag"></i> <span class="caret"></span></button>
                            <ul class="dropdown-menu">

                                {% for tag in posts.tags %}
                                <li>
                                    <a href="" class="ng-binding">
                                        <i class="fa fa-fw fa-circle text-xs"></i>
                                        {{tag}}
                                    </a>
                                </li>
                                {% endfor %}

                            </ul>
                        </div>
                    </div>
                </div>


                <!-- / header -->
                <div class="wrapper b-b">
                    <h2 class="font-thin m-n ng-binding">{{posts.title}}</h2>
                </div>
                <div class="wrapper b-b">
                    <a href="/user/{{posts.name}}">{{posts.name}}</a> 发布于{{posts.ctime}} - {{posts.viewByCount}} 次浏览 - 主题 {% if 'share' === posts.theme%}分享{%endif%}{%if 'ask' === posts.theme%}问答{%endif%}{% if 'job' === posts.theme%}招聘{%endif%}
                </div>
                <div class="post-css clearfix padder-md" style="padding: 20px 35px;">
                    {% autoescape false %}{{ posts.mdRender }}{% endautoescape %}
                </div>

                {% if posts.iscomment %}
                <div class="wrapper b-b b-t margin10-tb">
                    <i class="fa fa-comments-o"></i>
                    <span>评论与回复</span>- 1个回复
                </div>
                <div id="wrap-comments" class="wrapper">


                    {% for comment in comments %}
                    <div class="each-comments" id="{{comment.cid}}">
                        <a href="/user/{{comment.name}}" class="pull-left thumb-sm">
                            <img src="{{comment.author.avatar}}" class="img-circle">
                        </a>

                        <div class="m-l-xxl m-b">
                            <div>
                                <a href=""><strong>{{comment.name}}</strong></a>

                                {% if comment.name == user.nickname || user.role > comment.author.role %}
                                <a id="delete-comment" class="btn-xs" href="javascript:;"><i class="fa fa-trash-o"></i></a>
                                {% endif %}

                                {% if comment.name != user.nickname %}
                                    <a id="reply-comment" class="btn-xs pull-right" href="javascript:;"><i class="fa fa-reply"></i></a>
                                {% endif %}

                                {% if 1 == comment.author.role %}
                                <label class="label bg-info m-l-xs">Developer</label>
                                {% endif %}

                                {% if 2 == comment.author.role %}
                                <label class="label bg-dark m-l-xs">Admin</label>
                                {% endif %}

                                {% if 3 == comment.author.role %}
                                <label class="label bg-danger m-l-xs">SuperAdmin</label>
                                {% endif %}


                                  <span class="text-muted text-xs block m-t-xs">
                                    {{comment.createtime}}
                                  </span>
                            </div>
                            <div class="m-t-sm reply-wrap">
                                {% if comment.reply %}
                                    <a href="">@{{comment.reply}}</a>&nbsp;&nbsp;
                                {% endif %}
                                {% autoescape false %}
                                {{comment.comment}}
                                {% endautoescape %}
                            </div>

                            <!--reply-->
                            {% if comment.name != user.nickname %}
                                <div class="reply panel b-a hide">
                                    <div class="panel-heading b-b b-light" reply-name="{{comment.name}}">
                                        @{{comment.name}}
                                    </div>
                                    <textarea class="comment-content form-control" rows="1" placeholder="评论说点什么吧"></textarea>
                                    <div class="panel-footer bg-light lt">
                                        <button id="reply-btn" class="btn btn-success w-xs font-bold">发表回复</button>
                                        <div class="btn pull-right"><a href="" class="markSyn">支持Github风格的Markdown语法</a>
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                            <!--end reply-->
                        </div>
                    </div>
                    {% endfor %}

                    {% if !comments.length %}
                    <div class="text-center">暂无评论</div>
                    {% endif%}

                </div>


                <div class="wrapper">
                    <div class="panel b-a">
                        <div class="ng-hide">
                            <!--<div class="panel-heading b-b b-light ng-binding">-->
                            <!--james@gmail.com-->
                            <!--</div>-->
                            <!--<div id="comment-content" class="wrapper" contenteditable="true" style="min-height:100px"></div>-->
                            <textarea id="comment-content" class="form-control comment-content" rows="5"
                                      placeholder="评论说点什么吧"></textarea>

                            <div class="panel-footer bg-light lt">
                                <button id="comment-btn" class="btn btn-success w-xs font-bold">发表回复</button>
                                <div class="btn pull-right"><a href="" class="markSyn">支持Github风格的Markdown语法</a></div>
                            </div>
                        </div>
                    </div>
                </div>

{% endif %}
            </div>
        </div>
    </div>


</div>


{% endblock %}
{% block loadjs %}
<script>
    setTimeout(function(){
    //hljs
    require(['jquery','lib/highlight.min'], function ($, hljs) {
        $('pre code').each(function(i, block) {
            hljs.highlightBlock(block);
        });
        $('.post-css').find('table').addClass('table table-bordered table-hover table-condensed bg-white-only');
    });
    //comments
    require(['comment/comment.min','postsdocs/del.min']);
    })
</script>
{% endblock %}
